<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 事件源： -->
     <button style="font-size: 36px;" onclick="alert('hello word!')">点击1</button>
    <!-- 事件监听： 绑定事件、触发事件
        1.html属性中提供了on+时间类型:耦合性高，代码复用率低
        2.DOM0绑定事件：对象.属性（on+事件类型）= 事件处理函数
        3.DOM2绑定事件：对象.方法（）;推荐
    -->
    <button class="ck" >点击2</button>
    <script>
        // 获取节点
        const btn=document.querySelector('.ck');
        // 对事件做响应/对象.属性=事件处理 程序（函数）;
        btn.onclick=function(){
            alert('hello btn2');
        }
        btn.onclick=null; //移除事件
    </script>
    <button id="btn">点击3</button>
    <script>
        const ck =document.querySelector('#btn');
        //添加事件监听(函数) addEventListener('事件类型'，'事件处理函数'，[ture/false]);
        //事件类型不需要前缀on
        ck.addEventListener('click',text);
        //移除事件
        ck.removeEventListener('click',text);
        let test =function(){
            alert('hello btn3')
        }
    </script>
</body>
</html>